<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 101px;
            height: 101px;
            background-color: red;
            opacity: 1;
            position: absolute;
            left: 0px;
        }
        #topDiv {
            top: 200px;
        }
        #bottomDiv {
            top: 400px;
        }
    </style>

</head>
<body>
    <div id="topDiv"></div>
    <div id="bottomDiv"></div>
 

    <script>
        // width 100 - 400  height 100 - 400 left 0 - 200 top 200 - 300 opacity 1 - 0.5
        // {width: 400, height: 400, left: 200, top: 300, opacity: 50} 传入的数据
        var topDiv = document.getElementById('topDiv');
        var bottomDiv = document.getElementById('bottomDiv');
        topDiv.onclick = function() {
            startMove(this, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function(){
                startMove(bottomDiv, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function(){
                    alert('over');
                });
            });
        }

        function getStyle(dom, prop) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[prop];
            }else{
                return dom.currentStyle[prop];
            }
        }

        function startMove(dom, attrObj, callBack) {
            clearInterval(dom.timer);
            var speed = null, cur = null;
            dom.timer = setInterval(function(){
                var bStop = true;
                for(var prop in attrObj){
                    if(attrObj.hasOwnProperty(prop)){
                        if(prop == 'opacity') {
                            cur = parseFloat(getStyle(dom, prop)) * 100;
                        }else{
                            cur = Math.round(parseFloat(getStyle(dom, prop)));
                            // console.log(cur);
                        }
                        // console.log(attrObj[prop] - cur);
                        speed = (attrObj[prop] - cur) / 7;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if(prop == 'opacity'){
                            dom.style[prop] = (cur + speed) / 100 + ""; 
                        }else{
                            dom.style[prop] = cur + speed + 'px'; 
                        }
                        if(cur != attrObj[prop]){
                            bStop  = false;
                        }
                    }
                }
                if(bStop) {
                    // console.log('over');
                    clearInterval(dom.timer);
                    if(typeof(callBack) == 'function'){
                        callBack();
                    }
                }
            }, 30);
        }

    </script>
</body>
</html>